﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link rel="stylesheet"
          data-name="vs/editor/editor.main"
          href="vs/editor/editor.main.css" />
</head>
<body>
    <h2>Monaco Editor Diff Sample</h2>

    <label for="themePicker">Theme</label>
    <select id="themePicker">
        <option value="vs">Visual Studio</option>
        <option value="vs-dark">Visual Studio Dark</option>
        <option value="hc-black">High Contrast Dark</option>
    </select>
    <label for="languagePicker">Language</label>
    <select id="languagePicker">
    </select>
    <div class="checkbox">
        <label class="control-label">
            <input id="inline-diff-checkbox" type="checkbox" value="">
            Inline diff
        </label>
    </div>
    <div id="diff-editor" style="width: 100%; height: 800px; border: 1px solid grey"></div>

    <script>
        var require = { paths: { vs: 'vs' } };
    </script>
    <script src="vs/loader.js"></script>
    <script src="vs/editor/editor.main.nls.js"></script>
    <script src="vs/editor/editor.main.js"></script>
    <script src="../swagger/js/jquery.js"></script>

    <script>

        var MODES = (function () {
            var modesIds = monaco.languages.getLanguages().map(function (lang) {
                return lang.id;
            });
            modesIds.sort();

            return modesIds.map(function (modeId) {
                return {
                    modeId: modeId,
                    //sampleURL: 'index/samples/sample.' + modeId + '.txt'
                };
            });
        })();

        for (var i = 0; i < MODES.length; i++) {
            var o = document.createElement('option');
            o.textContent = MODES[i].modeId;
            //if (MODES[i].modeId === 'typescript') {
            //    startModeIndex = i;
            //}
            $('#languagePicker').append(o);
        }

        $('#languagePicker').change(function () {
            onProgress(MODES[this.selectedIndex].modeId);
        });

        //设置主题
        monaco.editor.setTheme($('#themePicker').val());

        //切换主题
        $('#themePicker').change(function () {
            var theme = $('#themePicker').val();
            if (theme) {
                monaco.editor.setTheme(theme);
            }
        });

        diffEditor = monaco.editor.createDiffEditor(document.getElementById('diff-editor'), {
            enableSplitViewResizing: false,
            originalEditable: true, // for left pane
            readOnly: false,         // for right pane
        });

        //初始化编辑器
        onProgress($('#languagePicker').val());

        function onProgress(lang) {
            var oldModel = diffEditor.getModel();

            var lhsModel = monaco.editor.createModel(oldModel.original && oldModel.original.getValue(), lang);
            var rhsModel = monaco.editor.createModel(oldModel.modified && oldModel.modified.getValue(), lang);

            diffEditor.setModel({
                original: lhsModel,
                modified: rhsModel
            });

            if (oldModel.original) {
                oldModel.original.dispose();
            } else if (oldModel.modified) {
                oldModel.modified.dispose();
            }
        }

        $('#inline-diff-checkbox').change(function () {
            diffEditor.updateOptions({
                renderSideBySide: !$(this).is(':checked')
            });
        });

    </script>
</body>
</html>
